<template>
  <div class="course-details" v-loading="dialogLoading">
    <ul>
      <li v-for="(item,index) in courseIndexList" :key="index">
        <div class="icon-imgs">
          <img v-show="[2, 4].includes(item.lessonStatus)" src="/src/assets/prepare-teach/passImg.png" alt="">
          <!-- 通过 -->

          <img v-show="[0].includes(item.lessonStatus)" src="/src/assets/prepare-teach/arendlyImg.png" alt="">
          <!-- 待备课 -->

          <img v-show="item.lessonStatus === 5" src="/src/assets/prepare-teach/faildImg.png" alt="">
          <!-- 未通过 -->

          <img v-show="[1, 3].includes(item.lessonStatus)" src="/src/assets/prepare-teach/under.png" alt="">
          <!-- 审核中 -->
        </div>
        <div class="detaias">第{{ item.orderNo }}讲 {{ item.courseIndexName }}</div>
        <div class="menu">
          <template v-if="[4, 2].includes(item.lessonStatus) || item.directTeaching === 1">
            <!-- <el-button type="primary" round size="small" @click="toLive(item)">去直播</el-button> -->
            <el-button type="primary" round size="small" @click="toteach(item)">去上课</el-button>
          </template>
          <el-button type="primary" round size="small" v-if="[4, 2, 3, 1].includes(item.lessonStatus)" @click="courseDetailFileList(item)">查看备课</el-button>
          <el-button type="primary" round size="small" v-if="[5].includes(item.lessonStatus)" @click="courseDetailFileList(item)">重新备课</el-button>
          <el-button type="primary" round size="small" v-if="[0].includes(item.lessonStatus)" @click="courseDetailFileList(item)">去备课</el-button>
        </div>
      </li>
    </ul>
    <cus-empty v-if="!courseIndexList.length && !dialogLoading" />
  </div>
</template>

<script lang='ts'>
import { ref, inject } from 'vue';
import $ from '$';
import { ElMessage } from 'element-plus';
// import CurriculumPapers from './curriculum-papers.vue';
import CurriculumPapers from './curriculum-papers-two.vue';
import ChooseClass from "./choose-class.vue";
import ViewCourse from "@/views/prepare-teach/components/view-course.vue";


export default {
  props: {
    courseId: String,
  },
  setup(props) {
    // 列表数据
    let courseIndexList = ref([])
    let dialogLoading = ref(false)
    let close: any = inject('close');
    const queryData = async() => {
      dialogLoading.value = true
      let res = await $.http.json('/courseIndex/query', { courseId: props.courseId });
      if(res.result) {
        courseIndexList.value = res.json
      }
      dialogLoading.value = false
    }
    queryData()
    const courseDetailFileList = (item, index) => {
      $.screen.create( CurriculumPapers, { title: item.courseIndexName, id: item.id }).then((data: any) => {
        if(data) {
          queryData()
          close(data)
        };
      }).catch((data: any) => {
        if(!data) {
          queryData()
          close(data)
        };
      })
    }
    const toteach = (item)=> {
      $.screen.create(ViewCourse, { id: item.id }, { zIndex: "2010", hiddenBack: true });
      // if (import.meta.env.MODE == "ymsy") {
      //   $.screen.create(ViewCourse, { id: item.id }, { zIndex: "2010", hiddenBack: true });
      // } else {
      //   $.screen.create(ChooseClass, { title: "选择班级", id: item.id }).then((data: any) => data && close(data));
      // }
    }
    // 提交备课
    let prepareLessonId = ref()
    const savePrepareClass = async(item) => {
      //获取提交备课参数
      const prepareLessonRequest = new Promise((resolve, reject) => {

        $.http.post('/admin/prepareLesson/queryPrepareLessonByCourseIndexId',{ courseIndexId: item.id }).then(res => {
          if(res.result) {
            resolve(res.json)
          }else{
            ElMessage.error(res.msg)
            reject(false)
          }
        })
      })
      // 将获取的参数传到提交接口内
      prepareLessonRequest.then((res: any) => {
        prepareLessonId.value = res.prepareLesson.id
        let __params = {
          courseId: res.courseDto.id,
          courseIndexId: res.courseDto.courseIndexId,
          prepareLessonId: prepareLessonId.value,
        }
        $.http.post('/admin/prepareLesson/submitPrepareLessonById', __params).then(res => {
          if(res.result){
            ElMessage.success('提交成功')
            queryData()
          }else {
            ElMessage.error(res.json)
          }
        })
      })
    }

    const toLive = () => window.open('https://live.chuangcache.com/externalUrl/aHR0cHM6Ly9hcGktdmNsYXNzLmNodWFuZ2NhY2hlLmNvbS9saXZlLzUyMjI3MjAwNDYyNDA4OTQ5NzcvMy81MjIyNzE4NzI4NzEzNTM5NTg2');

    return { courseIndexList, dialogLoading, courseDetailFileList, queryData, savePrepareClass, toteach, toLive }
  }
}
</script>

<style lang="scss" scoped>
    :deep(.modal-confirm .modal-body){
      padding: 0 20px 30px;
    }
    :deep(.modal-confirm .modal-header){
      margin-bottom: 20px;
    }
  .course-details{
    min-height: 200px;
    ul{
      max-height: 500px;
        li{
          height: 60px;
          background: #FFFFFF;
          border-radius: 10px;
          display: flex;
          justify-content: space-between;
          margin: 10px 0px;
          border: 1px solid #DEE4F1;
          align-content: center;
          line-height: 60px;
          .icon-imgs {
            width: 56px;
            height: 37px;
            position: relative;
            & > img {
              position: absolute;
              width: 100%;
              height: 100%;
              left: 0;
              top: 0;
            }
          }
          .detaias{
            flex-grow: 1;
            text-indent: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #77808D;
          }
          .menu{
            margin-right: 20px;
            & > .el-button:last-child{
              background: #faad14;
              border: #faad14;
            }
          }
          &:hover{
            background: #F5F7FA;
          }
        }
      }
    }
</style>
